<template>
  <div class="otherOrder">
    <van-sticky z-index="9">
      <div class="pub_tab">
        <van-tabs
          v-model:active="form.active"
          animated
          sticky
          :line-height="8"
          title-active-color="#12142E"
          title-inactive-color="#454757"
          color="#FF7A1F"
          background="#f7f7f7"
          @click-tab="changeVal"
          :swipe-threshold="4"
        >
          <van-tab
            :title="`${item.name}`"
            v-for="(item,index) in tabbar"
            :key="index"
            :name="item.id"
          />
        </van-tabs>
      </div>
    </van-sticky>
    <div class="content_box">
      <van-pull-refresh
        disabled
        v-model="refreshing"
        @refresh="onRefresh"
      >
        <van-list
          v-model:loading="loading"
          :finished="finished"
          @load="loadMore"
          :immediate-check="false"
        >
          <div
            class="order flex justify_between align_center"
            v-for="(item,index) in data"
            :key="index"
            @click="router.push({ path:'/enterprise/addPeople', query:{ type:1, id: item.id} })"
          >
            <p class="fontBold content3 color1">
              {{ item.username }}
            </p>
            <p class="font400 content3 color6">
              {{ item.phone }}
            </p>
          </div>
          <vant-list />
        </van-list>
      </van-pull-refresh>
    </div>
    <no-data v-if="data.length === 0" />
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div
        class="font400 content3 color4"
        @click="back"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">
          返回
        </p>
      </div>
      <div
        @click="submit"
        class="agree font400 content3 color4"
      >
        添加人员
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, defineAsyncComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { personnelList, getDemandType } from '@/api/index'
const NoData = defineAsyncComponent(() => import('@/components/NoData/index.vue'))
const router = useRouter()
const route = useRoute()
const store = useStore()
const loading: any = ref(false)
const finished: any = ref(false)
const refreshing: any = ref(false)
const data:any = ref([])
const form:any = ref({
  page: 1,
  pageSize: 10,
  active: Number(route.query.type) || 1
})

const tabbar: any = ref([])

// 角色
const showRole = async () => {
  tabbar.value = await getDemandType({ type: 'user' })
}
showRole()

const changeVal = async (name:any) => {
  router.replace({
    path: '/enterprise/personnel',
    query: { type: name.name }
  })
}

const selectedDemandTypeId = computed(() => {
  return Number(route.query.type) || 1
})

watch(selectedDemandTypeId, (newVal, oldVal) => {
  onRefresh()
})

const onRefresh = async () => {
  form.value.page = 1
  const list:any = await loadDemandList()
  data.value = list
  refreshing.value = false
}

const loadMore = async () => {
  form.value.page = form.value.page + 1
  const list:any = await loadDemandList()
  data.value = [...data.value, ...list]
  loading.value = false
}

const loadDemandList = async () => {
  // 异步更新数据
  const res:any =
    (await personnelList({ ...form.value })) || []
  if (!Array.isArray(res) && typeof res.list === 'object') {
    const keys:any = Object.keys(res.list)
    const newRes:any = keys.map((k:any) => res.list[k])
    finished.value = newRes.length < form.value.pageSize
    return newRes
  }

  finished.value = res.list.length < form.value.pageSize
  return res
}

onRefresh()

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const submit = () => {
  router.push({ path: '/enterprise/addPeople', query: { type: 2 } })
}

</script>
<style lang="less" scoped>
.otherOrder {
    padding: 15px 0;
}
.order {
    margin:20px 15px;
    background: #ffffff;
    border-radius: 5px;
    padding:20px 15px;
}
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 242px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}
@media (min-width: 750px) {
  .otherOrder {
    padding: 15px 0;
}
.order {
    margin:20px 15px;
    background: #ffffff;
    border-radius: 5px;
    padding:20px 15px;
}
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 242px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}
}
</style>
